<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>选择头像并提交</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
        }
        .avatar-container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
        }
        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
        }

        .avatar img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
        .avatar:hover {
            transform: scale(1.1);
        }
        .avatar.selected {
            border: 2px solid #4CAF50;
        }
        .submit-button {
            display: block;
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            margin-top: 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out;
        }
        .back{
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin-top: 10px;
            border: none;
            border-radius: 5px;
            background-color: #4CAF50;
            text-align: center;
            color: white;
        }
        .submit-button:hover {
            background-color: #45a049;
        }
        .back:hover{
            background-color: #45a049;
        }
        .result-box {
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>选择头像并提交</h1>

    <div class="avatar-container">
        <div class="avatar" onclick="selectAvatar('images/photo_1.jpg')">
            <img src="images/photo_1.jpg" alt="images/photo_1.jpg">
        </div>
        <div class="avatar" onclick="selectAvatar('images/photo_2.jpg')">
            <img src="images/photo_2.jpg" alt="images/photo_2.jpg">
        </div>
        <div class="avatar" onclick="selectAvatar('images/photo_3.jpg')">
            <img src="images/photo_3.jpg" alt="images/photo_3.jpg">
        </div>
        <div class="avatar" onclick="selectAvatar('images/photo_4.jpg')">
            <img src="images/photo_4.jpg" alt="images/photo_4.jpg">
        </div>
        <div class="avatar" onclick="selectAvatar('images/photo_5.jpg')">
            <img src="images/photo_5.jpg" alt="images/photo_5.jpg">
        </div>
        <div class="avatar" onclick="selectAvatar('images/photo_6.jpg')">
            <img src="images/photo_6.jpg" alt="images/photo_6.jpg">
        </div>
        <!-- 添加更多头像 -->
    </div>

    <button class="submit-button" onclick="submitChoice()">提交</button>
<%--    <div id="" class="back" href="" style="">返回个人中心</div>--%>
    <button type="button" class="back" onclick="window.location.href='person.html'">返回个人中心</button>

    <div id="result-box" class="result-box"></div>
</div>

<script>
    var selectedAvatar = null;

    function selectAvatar(alt) {
        if (selectedAvatar) {
            selectedAvatar.classList.remove("selected");
        }
        var avatars = document.getElementsByClassName("avatar");
        for (var i = 0; i < avatars.length; i++) {
            if (avatars[i].querySelector("img").alt === alt) {
                avatars[i].classList.add("selected");
                selectedAvatar = avatars[i];
                break;
            }
        }
    }

    function submitChoice() {
        if (selectedAvatar) {
            var alt = selectedAvatar.querySelector("img").alt;
            var resultBox = document.getElementById("result-box");
            resultBox.innerHTML = "已修改头像: " + alt;
            resultBox.style.display = "block";

            // 发送请求将选中的图片名称提交到服务器端
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "user/updateImage", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        console.log("修改成功");
                    } else {
                        console.log("修改失败");
                    }
                }
            };
            var data = {
                avatarName: alt
            };
            xhr.send(JSON.stringify(data));
        } else {
            alert("请选择一个头像");
        }
    }
</script>
</body>
</html>
